axios.interceptors.request.use(
  (config) => {
    config.headers['Authorization'] = 'Bearer' + localStorage.getItem('token');
    return config
  },
  (err) => {
    return Promise.reject(err)
  }
)
axios.interceptors.response.use(
  (res) => { 
    return res;
  },
  (error) => {
    if (error.response.status == 401) {
    } else if (error.response.status == 404) {
      alert('访问路径有误!');
    } else if (error.response.status == 500) {
      alert('服务器内部错误!');
    }
    return Promise.reject(error)
  }
)

var btn = document.querySelector(".addbox .add");
btn.onclick = () => {
  mask.style.display = "block";
}
var mask = document.querySelector(".mask");
mask.onclick = (e) => {
  mask.style.display = "none";
  inputs[0].value = '';
  inputs[1].value = '';
  inputs[2].value = '';
}
var content = document.querySelector(".content");
content.onclick = (e) => {
  e = e || window.event;
  e.stopPropagation();
}

function render(userlist) {
  var str = userlist.map((item, index) => {
    return `<ul class="row">
            <li>${item.email}</li> 
            <li>${item.name}</li>
            <li>${item.phone}</li>
            <li>编辑2</li>
            <li>是</li>
            <li>正常</li>
            <li><span class="iconfont icon-bianji editicon" id="${item._id}" email="${item.email}" name="${item.name}" phone="${item.phone}"></span><span class="iconfont icon-shanchu deleteicon" id="${item._id}" data-phone=${item.phone}></span></li>
            </ul>`
  }).join("")
  if (userlist.length > 0) {
    document.querySelector(".table-body").innerHTML = str;
  } else {
    document.querySelector(".table-body").innerHTML = "<div class='empty'>无用户数据!</div>";
  }
}
var pages = 1
axios.get('/user/list', { params: { page: pages, count: 2 } }).then((res) => {
  console.log(res.data);
  render(res.data.data)
})
var next = document.querySelector('.next')
next.onclick = () => {
  axios.get('/user/list', { params: { page: ++pages, count: 2 } }).then((res) => {
    render(res.data.data)
  })
}
var prev = document.querySelector('.prev')
prev.onclick = () => {
  axios.get('/user/list', { params: { page: --pages, count: 2 } }).then((res) => {
    render(res.data.data)
  })
}
var search = document.querySelector('.search')
var inputs = document.querySelector('.searchbox input')
search.onclick = () => {
  axios.get('/user/search', { params: { searchkey: inputs.value } }).then((res) => {
    render(res.data.data)
  })
}

var tablebody = document.querySelector('.table-body')
tablebody.onclick = function (e) {
  if (e.target.tagName == 'SPAN' && e.target.classList.contains('.table-body')) {
    axios.post('.user/delete', { params: { phone: e.target.dataset.phone } }).then((res) => {
      render(res.data.data)
    })
  }
}
var userinfo = JSON.parse(localStorage.getItem('userinfo'));
document.querySelector('.username').innerHTML = userinfo.name;

var contents = document.querySelectorAll('.content input')
var add = document.querySelector('button')
add.onclick = () => {
  var user = {
    email: contents[0].value,
    name: contents[1].value,
    phone: contents[2].value
  }
  console.log(user);
  axios.post('/user/push', { params: user }).then((res) => {
    console.log(res);
  })
}